<template>
    <div class="flex-box">
        <heads title="动态"></heads>
        <div style="background: #35495e;height:50px; display: flex; vertical-align: center;">
            <div style="height: 80px;width:80px;margin: 10px 0px 0px 20px;z-index:1">
                <img :src="thumb" width="80" height="80"/>
            </div>
            <div style="flex: 1;padding: 10px;color: white;display: flex;align-items: center;vertical-align: center">

            </div>
        </div>
        <div style="height: 40px;background: white">
        </div>
        <div style="background: white ;padding:10px;font-size: 14px;border-bottom: 1px solid #efeeee;" >
            <p>{{name}}</p>
            <p><span>{{like_user_count}}关注</span>&nbsp;&nbsp;<span>{{fans_count}}粉丝</span>
                <span  @click="attention" style="display: block;float: right" :class="{link_user:style_like_user,no_like_user:style_no_like_user}">{{like_user}}</span>
            </p>

        </div>
        <div class="flex-item" style="display: flex;flex-direction: column;">

            <scroller v-show="show"
                      :lockX=true
                      :scrollbar-y=false
                      :scrollbar-x=false
                      @on-pulldown-loading="pull_down()"
                      @on-pullup-loading="pull_up()"
                      :pulldown-config="{downContent: '正在加载',loadingContent:'正在加载',upContent:'释放更新',content:'....'}"
                      :pullup-config="{downContent: '正在加载',loadingContent:'正在加载',upContent:'释放更新',content:'....'}"
                      :use-pulldown=true
                      :use-pullup=false
                      :bounce="bounce"
                      ref="scrollerBottom"
            >
                <div>
                    <panel :list="list" :type="activityType"></panel>
                    <divider v-show="show2">尚未发表任何文章哟！</divider>
                </div>

            </scroller>
            <toast v-model="showPositionValue"  :time="1000"  width="14.6em" :type="type" is-show-mask :text="message" :position="position"></toast>
            <loading :show="show1" text=""></loading>
        </div>

    </div>
</template>

<script>
    import {Scroller, Panel,Toast,Loading,Divider} from 'vux'
    import heads from '../header';

    export default {
        name: "activity",
        components: {
            heads,
            Scroller,
            Panel,
            Toast,
            Loading,
            Divider
        },
        data() {
            return {
                show: true,
                bounce: true,
                activityType: '5',
                list: [],
                page: 1,
                swiperHeight: 0 + 'px',
                pageCount: 5,
                style_like_user:true,
                style_no_like_user:false,
                like_user:'未关注',
                like_user_count:0,
                fans_count:0,
                name:'',
                showPositionValue:false,
                message:null,
                type:'success',
                position:'middle',
                user_id:'',
                thumb:'static/images/head.png',
                show1:false,
                show2:false
            }
        },
        mounted() {

        },
        computed:{
            user_state () {
                return this.$store.getters.user_state
            }

        },
        methods: {
            pull_up() {
                this.show2=false;
                this.getActivity(1)
            },
            pull_down() {
                this.show2=false;
                this.getActivity(2)
            },
            userInfo(){
                var _this=this;
                this.$axios.get(this.$axios.defaults.baseURL+'userInfo',{
                        params:{
                            user_id:_this.user_id
                        }
                }).then(function (res) {

                    if(res.data.state){
                    _this.like_user_count=res.data.data.like_user_count;
                    _this.fans_count=res.data.data.fans_count;
                    _this.name=res.data.data.name;
                    _this.thumb=(res.data.data.thumb==null)?'static/images/head.png':res.data.data.thumb;

                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            attention(){
                if(!this.user_state){
                    this.message='登录后关注';
                    this.showPositionValue=true;
                    this.type='warn'
                }else {
                    var _this = this;
                    this.$axios.post(this.$axios.defaults.baseURL + 'linkUser', {
                        link_user_id:_this.user_id,
                    }).then(function (res) {
                        if (res.data.state) {
                            _this.linkUserStatus();

                        }else {
                            _this.message=res.data.msg;
                            _this.showPositionValue=true;
                            _this.type='warn'
                        }
                    }).catch(function (err) {
                        console.log(err)
                    })
                }
            },
            linkUserStatus(){
                var _this=this;
                this.$axios.get(this.$axios.defaults.baseURL+'linkUserStatus',{
                    params:{
                        link_user_id:_this.user_id
                    }
                }).then(function (res) {
                    if(res.data.state&&res.data.data!=null){
                        if(res.data.data.status==1) {
                            _this.like_user = '已关注'
                            _this.style_like_user=true;
                            _this.style_no_like_user=false;
                        }else{
                            _this.like_user = '未关注'
                            _this.style_like_user=false;
                            _this.style_no_like_user=true;
                        }
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            getActivity(status = 0,user_id) {
                if(status==0){
                    this.show1=true;
                }
                var info = [];
                var _this = this;
                this.$axios.get(this.$axios.defaults.baseURL + 'userArticleList', {
                    params: {
                        user_id:user_id,
                        page: this.page,
                        pageSize:this.pageCount
                    }
                }).then(function (res) {
                    _this.show1=false;
                    _this.linkUserStatus()
                  if(_this.page==1){
                        _this.userInfo();
                    }
                    for (var i = 0; i < res.data.data.length; i++) {
                        var box = [], url = [], meta = [];

                        box['id'] = res.data.data[i].id;
                        box['src'] = 'static/images/nopic.png';
                        box['title'] = res.data.data[i].title.substr(0,20);
                        box['desc'] = res.data.data[i].content.substr(0,50);
                        url['path'] = '/content?id=' + res.data.data[i].id;
                        url['replace'] = false;
                        meta['date'] = res.data.data[i].created_at;
                        meta['other'] = '';
                        meta['source'] = '';
                        box['url'] = url;
                        box['meta'] = meta;
                        info[i] = box;
                    }

                    if (info.length == _this.pageCount) {
                        _this.page = _this.page + 1;

                    }

                    for (var i = 0; i < _this.list.length; i++) {
                        for (var j = 0; j < info.length; j++) {
                            if (_this.list[i].id == info[j].id) {
                                info.splice(j, 1)
                            }
                        }
                    }

                    if (status == 1) {
                        setTimeout(() => {
                            _this.list = _this.list.concat(info)
                            _this.$refs.scrollerBottom.donePullup();
                            if(_this.list.length==0){
                                _this.show2=true;
                            }
                        }, 1000)
                    }

                    else if (status == 2) {
                        setTimeout(() => {

                            _this.list = info.concat(_this.list)
                            _this.$refs.scrollerBottom.donePulldown();
                            if(_this.list.length==0){
                                _this.show2=true;
                            }
                        }, 1000)

                    } else {
                        _this.show = true;
                        _this.list = _this.list.concat(info)
                        if(_this.list.length==0){
                            _this.show2=true;
                        }
                    }

                }).catch(function (err) {
                    _this.show1=false
                    console.log(err)
                })

            },
        },
        activated(){
            this.page=1;
            this.list=[];
            this.show1=false;
            this.show2=false;
            this.user_id=this.$route.query.id;
            this.getActivity(0,this.user_id);
        }

    }
</script>

<style lang="less" scoped>
    @import "../../assets/css/comm";
    .padding-auto {
        padding: 0px 7px;
    }
    .link_user{
        background: #ccc;font-size:12px;
        padding: 5px;height:16px;line-height: 16px;width: 40px;text-align: center;
        color: white;border-radius: 3px;
    }
    .no_like_user{

        background: red;font-size:12px;
        padding: 5px;height:16px;line-height: 16px;width: 40px;text-align: center;
        color: white;border-radius: 3px;
    }


</style>